<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-alert type="warning" :closable="false" show-icon>
                <template #title>
                    温馨提示：设置商城首页，商品详情页显示足迹气泡。营造活动氛围，增强气氛
                </template>
            </el-alert>
            <el-table size="large" class="mt-[14px]" :data="data">
                <el-table-column label="类型" prop="name" min-width="120" />
                <el-table-column label="提醒内容" prop="template" />
                <el-table-column label="气泡状态">
                    <template #default="{ row }">
                        <el-switch
                            v-model="row.status"
                            :active-value="1"
                            :inactive-value="0"
                            @click="handlesave(row.id)"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!-- <footer-btns> -->
            <!-- <el-button type="primary" @click="handlesave">保存</el-button> -->
            <!-- </footer-btns> -->
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { footprintlists, changefootprintstatus } from '@/api/application'

const data = ref([])
const getData = async () => {
    data.value = await footprintlists()
}
getData()
const handlesave = async (id: number) => {
    await changefootprintstatus({ id })
    getData()
}
</script>
<style lang="scss" scope>
//TODO
.el-alert--warning.is-light {
    background-color: rgba(246, 248, 255, 1);
    color: rgba(64, 115, 250, 1);
}
</style>
